<template>
	<div class="addressList">
        <address-list  :userInfomation="getUserInfo" :addressArr="getAddressList"></address-list>
         <div id="contorlShow" v-if="!this.getAddressList || !this.getAddressList.length">
			<div id="disShow">
				<img src="static/image/no_news.png" alt="" />
				<p>暂无收货地址信息</p>
			</div>
		</div>
	</div>   <!--:goEditAddress="goEditAddress"-->
</template>

<script>

import AddressList from "../../../real-components/AddressList";
import {mapGetters,mapActions,mapMutations} from "vuex";
import {loading} from "../../../utils/loading.js";
import axios from "axios";
import {zxAddress} from '../../../api/zxApi.js';
import {reFreshUserInfo} from '../../../utils/WXH/login.js';
export default {
  	name: 'addresslist',
  	data () {
    	return {
			msg: '这是地址列表页面',
            page: "addressList",
            componentName: "addressList",
            userInfomation: {},
            addressArr:[],
            province: [],
            haveAddress:false
		}
	},
	computed: {
		...mapGetters([
			"getDomTree"
		]),
		...mapGetters('zx',[
			'getAddressList','getUserInfo'
		]),
		...mapGetters('wxh',[
			'sessionId',
			'userInfo'
		])
	},
	components: {
    	AddressList,
    },
    watch: {
		async getUserInfo(){
			this.renderNew(this.getUserInfo);
//			调用個人中心的方法刷新用户信息 防止vuex用户信息失效
			reFreshUserInfo(this);
		},
		getAddressList(newVal, oldVal){
			console.log("-=-=-=-=-=-=-=--=", newVal);
			if(newVal.length != 0){
				this.haveAddress = true;
//				console.log('我就不懂了');
			} else if (newVal.length === 0) {
				this.haveAddress = false;
			}
		}
    },
    methods: {
	    ...mapActions('zx',[
	    	'addressGetUser'
	    ]),
	    ...mapMutations('zx',[
	    	'setAddressListMutation','setaddFlagMutation'
	    ]),
	    ...mapMutations('wxh',[
			'USER_INFO',
			'LOGO_OUT',
			'LOGO_IN'
		]),
	    goEditAddress(){
	    	this.setaddFlagMutation(false);
			this.$router.push('addAddress')
	    },
	     // 获取所有省
	    async getArea (code) {
	    	if(code){
	    		//http://172.19.5.89:33001/address/select/1 
//	    		http://172.19.6.152/address/select/1
//				let url = zxAddress + '/address/select/';
				let res = await axios.get(window.api.base_host+'/address/select/' + code)
//				console.log(res.data.data,'省市区');
//	    		let res = await axios.get(window.api.mall_base_host + '/address/getarealist?areaid=' + code)  //erp接口
	        	return res.data.data;
	    	}
	        
	    },
	    //格式化地址信息
	    async getAwait(item) {
//	    	console.log(item.province,this.province,'===')
	        let provinceName = this.getName(item.province,this.province);
	        let cityList = await this.getArea(item.province);
	        let cityName = this.getName(item.city,cityList);
	        let areaList = await this.getArea(item.city);
	        let areaName = this.getName(item.region,areaList);
//	        console.log(provinceName)
	        item.result = provinceName + ' ' + cityName + ' ' + areaName + ' ' + item.address;
	        console.log(item.result,'詳細地址細心')
	        this.addressArr.push(item);
			
//			var res = [];
// 			var json = {};
 			
 			//之前解决地址重复的问题   先暂时注释
// 			var defaultAddress = this.addressArr[0]
//	        for(let i = 0; i < this.addressArr.length; i ++){
//	        	if(this.addressArr[i].defaultaddress == 1 && this.addressArr[0].defaultaddress != 1){
//	        		this.addressArr[0] = this.addressArr[i];
//	        		this.addressArr[i] = defaultAddress;
//	        	}
////				if(!json[this.addressArr[i]]){
////					   res.push(this.addressArr[i]);
////					   json[this.addressArr[i]] = 1;
////				}
//	        }
//	    	this.addressArr = res;
//	        this.setAddressListMutation(this.addressArr);
	    	
//	        console.log(this.addressArr,'ass')
	    },
	    //遍历地址
	    renderList (list) {
//	    	console.log(list,'参数');
	        this.addressArr = []
	        list && list.map((item) => {
//	        	console.log(123456789)
	           this.getAwait(item);
	        })
	    },
	    //重新获取数据渲染页面
	    async renderNew(source) {
	        console.log("renderNew方法里的source", source);
	        let defalt = [];
	        let arr = [];
	        this.userInfomation = source
	        this.userInfomation.addressList && this.userInfomation.addressList.map((item) => {
	            if(item.defaultaddress == '默认'){
	                defalt.push(item);
	                return
	            } else {
	                arr.push(item);
	            }
	        })
	        this.province = await this.getArea('1');
//	        this.province = province.arealist;
	        this.renderList([...defalt,...arr]);
	    },
	    
	    getName(val,arr) {
//	    	console.log(arr,'获取名字');
	        let result = '';
	        arr && arr.map((item) => {
	            if(item.rid == val){
	                result = item.name;
	            }
	        });
	        return result;
	    },
  	},
	created () {
		console.log(this.getAddressList,'2022288888888220');
		if(this.sessionId){
			this.addressGetUser(this.sessionId);
		}else {
			this.$router.push('login');
		}

	},
	mounted () {
		
		// initDomTree(this.getDomTree[this.page]);
		
	},
	updated() {
		
		//页面更新完毕
		// initDomTree(this.getDomTree[this.page]);
//		console.log(this.getUserInfo,'this.getUserInfo');
		
//		console.log(this.userInfomation,'+_____________________________+')
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.addressList {
		position: relative;
	}
	.style-components {
		display: flex;
		flex-flow: column nowrap;
	}
	.container {
		width: 800px;
		height: 300px;
		border: 1px solid red;
	}
	#disShow{
		position: absolute;
   		padding: 3rem;
   		top: 3rem;
   		text-align: center;
	}
</style>
